<template>
  <!-- 底部 切换上下篇文章功能模块 -->
  <div id="detail-bottom">
    <van-row type="flex" justify="space-between">
      <!-- 左按钮 点击去往上一篇 -->
      <van-col span="5">
        <div class="up_next" v-show="previousShow" @click="gotoPrevious">
          <van-icon name="arrow-left" />上一篇
        </div>
      </van-col>
      <!-- 中间点赞效果 -->
      <van-col span="6">
        <van-icon
          name="like-o"
          size="50px"
          v-if="likeShow"
          @click="likeClick"
        />
        <van-icon
          name="like"
          size="50px"
          v-else
          color="red"
          @click="likeClick"
        />
      </van-col>
      <!-- 右按钮 点击去往下一篇 -->
      <van-col span="5">
        <div class="up_next" v-show="nextShow" @click="gotoNext">
          下一篇<van-icon name="arrow" />
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "DetailBottom",
  props: {
    nowId: Number,
  },
  data() {
    return {
      likeShow: true,
      id: Number,
      previousShow: true,
      nextShow: true,
    };
  },
  created() {
    this.id = this.nowId;
    // 判断是否是第一篇文章，来显示左按钮
    if (this.id == 0) {
      this.previousShow = false;
    }
    // 判断是否是最后一篇文章，来显示右按钮
    this.axios.get("/data/blogs.json").then((res) => {
      if (this.id == res.data.blogs.length - 1) {
        this.nextShow = false;
      }
    });
  },
  methods: {
    // 点赞效果
    likeClick() {
      this.likeShow = !this.likeShow;
    },
  //  点击左按钮，地址变为上一篇文章
    gotoPrevious() {
      let previous = this.id - 1;
      this.$router.push({
        query: {
          id: previous,
        },
      });
    },
    // 点击右按钮，地址变为下一篇文章
    gotoNext() {
      let next = this.id + 1;
      this.$router.push({
        query: {
          id: next,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#detail-bottom {
  text-align: center;
  font-size: 8px;
  color: rgb(65, 65, 65);
}
.up_next{
  cursor: pointer;
}
</style>>
